<template>
  <div>
    <blogHeader></blogHeader>
    <hr/>
    <div>
      用户名:<input type="text" v-model="loginInfoVo.username" placeholder="请输入用户名" />
      <br/>
      密码：<input type="password" v-model="loginInfoVo.password" placeholder="请输入密码" />
      <br/>
      <button v-on:click="login">登录</button>
      <br/>
      登录验证情况：<textarea cols="30" rows="10" v-model="responseResult"></textarea>
    </div>
    <hr/>
    <!-- 外置功能 -->
    <button v-on:click="find">查询所有</button>
    <hr/>
    <blogFooter></blogFooter>
  </div>
</template>

<script>
  // demo: 是别名  @/xxx/xxx/demo.vue: demo页面的路径,@是src
  import blogHeader from '@/view/BlogHeader.vue'
  import blogFooter from '@/view/BlogFooter.vue'


    export default {
      name: 'BlogLogin',
      // blogHeader、blogFooter组件给申明到components里面然后在template里面使用
      components: { blogHeader, blogFooter },
      data () {
        return {
          loginInfoVo: { username: '', password: '' },
          responseResult: []
        }
      },
      methods: {
        login () {
          this.$axios
            .post('/login', {
              username: this.loginInfoVo.username,
              password: this.loginInfoVo.password
            })
            .then(successResponse => {
              this.responseResult = JSON.stringify(successResponse.data)
              if (successResponse.data.code === 200) {
                this.$router.replace({path: '/index'})
              }
            })
            .catch(failResponse => {})
        },
        find(){
          console.log("into find() success");
        }


      }
    }
</script>

<style scoped>

</style>
